<template>
  <view class="container">
    <ve-card type="none">
      <view class="reason">
        <view class="header">
          <text>{{ checkDetail.postName }} </text>
          <text> | </text>
          <text style="color: #9ea5bb"> {{ checkDetail.staffName }} </text>
          <ve-tag color="red" style="margin-left: 16rpx" title="驳回"></ve-tag>
        </view>
        <view class="content">
          <view class="title">驳回原因：</view>
          <view>{{ checkDetail.reason }}</view>
        </view>
      </view>
    </ve-card>
    <ve-bottom-box v-if="ifAgain == 1">
      <view class="bottom-btns">
        <ve-button type="primary" @click="againApply" :loading="loading" size="long">重新申请</ve-button>
      </view>
    </ve-bottom-box>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getCostDetailApi } from '@/api/cost/index'

  const form = ref({})
  const checkDetail = ref({})
  const ifAgain = ref()

  const getDetail = async (id) => {
    const res = await getCostDetailApi({ id: id })
    if (res.code != 200) return
    const result = res.result
    form.value = result
    checkDetail.value = result.checkFlowList?.find((i) => i.status == 6)
  }

  const againApply = () => {
    if (form.value.costType == 1) {
      uni.navigateTo({
        url: `/pages/operate-cost/apply-form/index?id=${form.value.id}&type=againType&routeType=reason`,
      })
    } else {
      uni.navigateTo({
        url: `/pages/operate-cost/pay-form/index?id=${form.value.id}&type=againType&routeType=reason`,
      })
    }
  }

  onLoad((options) => {
    let id = options.id
    ifAgain.value = options.ifAgain
    getDetail(id)
  })
</script>

<style lang="less" scoped>
  .container {
    padding: 24rpx;
  }
  .reason {
    padding: 32rpx 0;
    .header {
      padding-bottom: 32rpx;
      border-bottom: 2rpx solid rgba(216, 216, 216, 0.3);
    }
    .content {
      margin-top: 32rpx;
      .title {
        height: 44rpx;
        margin-bottom: 8rpx;
        color: #9ea5bb;
      }
    }
  }
  .bottom-btns {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
</style>
